<template>
  <div style="position: relative">
    <!-- 地图层 -->
    <div class="ditu">
      <MapDiv ref="mymap" @mapInit="mapInit"></MapDiv>
      <div class="fg"></div>
    </div>

    <!-- 图层 -->
    <!-- <div class="tuceng"> -->
    <!-- title-头部  nav-导航 -->
    <!--         <div class="top-box">GDLNG安防视频监控管理平台</div>-->
    <div class="top-box"></div>

    <!-- 头部控件 -->
    <div class="heder-kongjian">
      <div class="kongjian-haver" @click="mapTypehandle(2)">卫星地图</div>
      |
      <div class="kongjian-haver" @click="mapTypehandle(1)">矢量地图</div>
      <!-- | -->
      <!-- <div class="kongjian-haver" @click="mapTypehandle(2)">三维地图</div> -->
    </div>

    <!-- 左侧-->
    <div class="left-box">
      <!--左侧控件-->
      <div class="kongjian">
        <div class="kongjian-mg">
          <el-icon v-if="!lbstate" @click="roundrobin(true)">
            <VideoPlay/>
          </el-icon>
          <el-icon v-else @click="roundrobin(false)">
            <VideoPause/>
          </el-icon>
        </div>
      </div>

      <div class="content bg-box" :class="{ expandcontent: !isleftboxShow }">
        <RealTimeTree @playVideo="playVideo" ref="realtimetree"></RealTimeTree>
      </div>
      <div class="control" @click="isleftboxShow = !isleftboxShow">
        <el-icon v-show="isleftboxShow">
          <CaretLeft/>
        </el-icon>
        <el-icon v-show="!isleftboxShow">
          <CaretRight/>
        </el-icon>
        <span>{{ isleftboxShow ? "收起" : "展开" }}</span>
      </div>
    </div>

    <!-- 右侧 -->
    <div class="right-box">
      <!-- 右侧控件 -->
      <div class="kongjian">
        <div class="kongjian-mg">
          <el-icon @click="zoomhandle(true)">
            <Plus/>
          </el-icon>
        </div>
        <div class="kongjian-mg">
          <el-icon @click="zoomhandle(false)">
            <Minus/>
          </el-icon>
        </div>
        <div class="kongjian-mg">
          <el-icon v-show="fullfcreen" @click="closebox(true)">
            <FullScreen/>
          </el-icon>
          <el-icon v-show="!fullfcreen" @click="closebox(false)">
            <FullScreen color="#3713b9"/>
          </el-icon>
        </div>
      </div>

      <!-- 右侧主体内容 -->
      <div class="control" @click="isrightboxShow = !isrightboxShow">
        <el-icon v-show="!isrightboxShow">
          <CaretLeft/>
        </el-icon>
        <el-icon v-show="isrightboxShow">
          <CaretRight/>
        </el-icon>
        <span>{{ isrightboxShow ? "收起" : "展开" }}</span>
      </div>
      <div class="content bg-box" :class="{ expandcontent: !isrightboxShow }">
        <Sensor ref="sensor"></Sensor>
      </div>
    </div>

    <!-- 底部 -->
    <div class="bottom-box"
         :style="{ left: !isleftboxShow ? '10px' : '320px', right: !isrightboxShow ? '10px' : '320px' }">
      <div class="content bg-boxw" :class="{ expandcontent: !isbottomShow }">
        <Picimg ref="picimg"></Picimg>
      </div>
      <div class="control-box" @click="isbottomShow = !isbottomShow">
        <div class="control">
          <el-icon v-show="!isbottomShow">
            <CaretTop/>
          </el-icon>
          <el-icon v-show="isbottomShow">
            <CaretBottom/>
          </el-icon>
          <span>{{ isbottomShow ? "收起" : "展开" }}</span>
        </div>
      </div>
    </div>
  </div>

  <MapList ref="lbmaplist" @startMapPlay="startMapPlay" @maprefresh="maprefresh"></MapList>
</template>

<style lang="scss" scoped>
.ditu {
  width: 100%;
  height: 94vh;
  position: relative;

  .fg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 400;
    pointer-events: none;
  }
}

.bg-box {
  background-image: url(./imgs/screen_bg_1.png);
  background-size: 100% 100%;
  border-radius: 6px;
}

.bg-boxw {
  background-image: url(./imgs/bg_weight.png);
  background-size: 100% 100%;
  border-radius: 6px;
}

.heder-kongjian {
  position: absolute;
  top: 20px;
  left: 300px;
  right: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 400;
  color: #10a6ec;

  .kongjian-haver:hover {
    cursor: pointer;
    color: #6453a1;
  }
}

.kongjian-mg {
  cursor: pointer;
  margin-bottom: 10px;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dacd21;
}

.top-box {
  position: absolute;
  top: -2px;
  left: 0px;
  right: 0px;
  height: 70px;
  overflow: hidden;
  //background-color: rgba($color: #a31d1d, $alpha: 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  z-index: 400;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

.left-box {
  position: absolute;
  top: 40px;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  z-index: 400;

  .kongjian {
    position: absolute;
    top: 0;
    right: -14px;
    display: flex;
    flex-direction: column;

    .kongjian-mg {
      cursor: pointer;
      margin-bottom: 10px;
      padding: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #FFFFFF;
      font-size: 20px;
      background-color: #0a247a;
    }
  }

  .content {
    height: 100%;
    width: 300px;
    overflow: auto;
    transition: width ease-in 0.2s;
  }

  .expandcontent {
    height: 100%;
    width: 0;
    overflow: auto;
    transition: width ease-out 0.2s;
  }

  .control {
    height: 90px;
    width: 20px;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-align: center;
    color: #10a6ec;
    background-image: url(./imgs/bg_stow_left.png);
    background-size: 100% 100%;
    padding: 20px 2px;
  }
}

.right-box {
  position: absolute;
  top: 40px;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  z-index: 400;

  .kongjian {
    position: absolute;
    top: 0px;
    left: -6px;
    display: flex;
    flex-direction: column;
  }

  .content {
    height: 100%;
    width: 300px;
    overflow: hidden;
    transition: width ease-in 0.2s;
  }

  .expandcontent {
    height: 100%;
    width: 0;
    overflow: auto;
    transition: width ease-out 0.2s;
  }

  .control {
    height: 90px;
    width: 20px;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-align: center;
    color: #10a6ec;
    background-image: url(./imgs/bg_stow_right.png);
    background-size: 100% 100%;
    padding: 20px 2px;
  }
}

.bottom-box {
  position: absolute;
  bottom: 10px;
  left: 320px;
  right: 320px;
  display: flex;
  flex-direction: column-reverse;
  z-index: 700;
  transition-property: left, right;
  transition-duration: 0.2s;

  .content {
    height: 230px;
    width: 100%;
    overflow: auto;
    transition: height ease-in 0.2s;
    //display: flex;
    // align-items: center;
    //justify-content: space-around;
  }

  .expandcontent {
    height: 0px;
    width: 100%;
    overflow: auto;
    transition: height ease-out 0.2s;
  }

  .control-box {
    display: flex;
    justify-content: center;

    .control {
      height: 20px;
      width: 90px;
      cursor: pointer;
      display: inline;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #10a6ec;
      background-image: url(./imgs/bg_stow_bottom.png);
      background-size: 100% 100%;
      padding: 2px 20px;
    }
  }
}

.tuceng {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 999;
}
</style>

<script>
import useView from "@/hooks/useView";
import {defineComponent, reactive, toRefs} from "vue";
import MapDiv from "./map/mapdiv.vue";
import RealTimeTree from "./leftbox/realTimeTree.vue";
import Sensor from "@/views/workScreen/rightbox/sensor.vue";
import Picimg from "@/views/workScreen/bottombox/picimg.vue";
import MapList from "@/views/workScreen/mapList.vue";

export default defineComponent({
  components: {
    MapDiv,
    RealTimeTree,
    Sensor,
    Picimg,
    MapList
  },
  setup() {
    const state = reactive({
      isleftboxShow: true,
      isrightboxShow: true,
      isbottomShow: true,
      fullfcreen: true,

      // 轮播参数
      mapintervalId: null, // 存储 setInterval 的 ID
      lbstate: false
    });
    return {...useView(state), ...toRefs(state)};
  },
  mounted() {
    // this.initMap(107.199167, 34.373333, 16);
  },
  unmounted() {
    // 在组件销毁前清除定时器
    this.clearLbData();
  },
  methods: {
    roundrobin(lbstate) {
      if (lbstate) {
        this.$refs.lbmaplist.init();
      } else {
        this.clearLbData();
      }
    },
    clearLbData() {
      if (this.mapintervalId) {
        this.lbstate = false;
        clearInterval(this.mapintervalId);
      }
    },
    maprefresh() {

    },
    startMapPlay(time) {
      let currentIndex = 0; // 当前显示的项的索引
      this.viewDataDrive(time.data[currentIndex])
      this.mapintervalId = setInterval(() => {
        currentIndex++
        if (currentIndex === time.data.length) {
          currentIndex = 0;
        }
        this.viewDataDrive(time.data[currentIndex])
      }, 1000 * time.time);
      this.lbstate = true;
      this.$refs.lbmaplist.visible = false;
    },
    zoomhandle(zoom) {
      if (zoom) {
        this.$refs.mymap.map.zoomIn();
      } else {
        this.$refs.mymap.map.zoomOut();
      }
    },
    mapTypehandle(type) {
      if (type === 1) {
        this.$refs.mymap.map.setMapType(window.TMAP_NORMAL_MAP);
      } else if (type === 2) {
        this.$refs.mymap.map.setMapType(window.TMAP_HYBRID_MAP);
      } else {
        this.$refs.mymap.map.setMapType(window.TMAP_HYBRID_MAP);
      }
    },
    mapInit() {
      this.$refs.realtimetree.getInfo();
    },
    // 视图数据驱动调用  条件：type==="station" 杆塔
    viewDataDrive(data) {
      this.$refs.sensor.playVideo(data);
      this.$refs.picimg.getInfo(data)
      this.$refs.mymap.findMarsk(data.id);
    },
    playVideo(data) {
      this.clearLbData();
      if (data.type === "station") {
        this.viewDataDrive(data)
      } else {
        let towerData = this.extractStations(data.children);
        this.viewDataDrive(towerData[0])
        // towerData.forEach((i) => {
        //   setTimeout(() => {
        //     this.$refs.mymap.findMarsk(i.id);
        //   }, 100 * 2)
        // })
      }
    },
    extractStations(nodes) {
      let result = [];
      nodes.forEach(node => {
        if (node.type === 'station') {
          result.push(node);
        }
        if (node.children && node.children.length > 0) {
          result = result.concat(this.extractStations(node.children));
        }
      });
      return result;
    },
    closebox(sta) {
      if (sta) {
        this.isleftboxShow = false;
        this.isrightboxShow = false;
        this.isbottomShow = false;
      } else {
        this.isleftboxShow = true;
        this.isrightboxShow = true;
        this.isbottomShow = true;
      }
      this.fullfcreen = !this.fullfcreen;
    }
  }
});
</script>
